<template>
  <!-- This footer should be hidden by default and shown when there are todos -->
			<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{unDoneListLength}}</strong>待完成</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters" @click="$emit('switch-todo',type)">
					<li>
						<a :class="{selected:type=='all'}" @click="type='all'" href="#/">全部</a>
					</li>
					<li>
						<a href="#/active" :class="{selected:type=='no'}" @click="type='no'">未完成</a>
					</li>
					<li>
						<a href="#/completed" :class="{selected:type=='yes'}" @click="type='yes'">已完成</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" @click="clearFn" v-if="hasDoneTodo">清空已完成</button>
			</footer>
</template>

<script>
export default {
    data(){
return{
    type:"all",// no yes
}
    },
props:["arr"],
computed:{
    unDoneListLength(){
        return this.arr.filter(item => item.isDone===false).length
    },
    hasDoneTodo(){
        return this.arr.some(item => item.isDone===true)
    }
},
methods:{
clearFn(){
    if(confirm("确定清空已完成事项?")){
        this.$emit("clear-todo")

    }
    }
}
}
</script>

<style>

</style>